<template>
  <el-table-column
    :fixed="data.fixed"
    :prop="data.prop"
    :label="data.label"
    :width="data.width"
    :sortable="data.sort"
    :align="data.search?.align || data.align"
    :class-name="data.filters ? '' : 'hiddenFilter'"
    :filters="data.filters"
    :filter-method="filterHandler"
  >
    <!-- 搜索框 -->
    <template
      v-if="data.headerSlotName||data.search"
      #header
    >
      <el-input
        v-if="data.search"
        v-model="search"
        :size="data.search?.size || 'small'"
        :placeholder="data.search?.placeholder || 'Type to search'"
      />
      <slot
        v-if="data.headerSlotName"
        :name="data.headerSlotName"
      />
    </template>
    <!-- slot -->
    <template
      v-if="data.slotName"
      #default="{ row, column,index }"
    >
      <slot
        :name="data.slotName"
        :data="{ row, column,index }"
        :currentData="row[column.property]"
      />
    </template>
  </el-table-column>
</template>
<script lang='ts' setup>
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import type { Header, InitData } from './typing/table'
interface Props {
  data: Header
}
const props = defineProps<Props>()
const { data } = toRefs(reactive(props))

const search = ref('')
const emit = defineEmits(['update:search'])

watchEffect(() => {
  emit('update:search', search.value)
})

// 筛选，勿动
const filterHandler = (
  value: string,
  row: InitData,
  column: TableColumnCtx<InitData>,
) => {
  const property = column.property
  return row[property] === value
}
</script>
<style lang='scss' scoped>
</style>
